<template>

    <div>
        <van-row justify="center" :style="{ marginTop: '20%' }">
            <img src="@/assets/pet_icon.png" style="width:120px; height:120px; border-radius:50%;" />
        </van-row>
        <van-row justify="center" :style="{ marginTop: '20%' }">
            <van-button round type="success" color="orange" @click="popup = true">
                登录 / 注册
            </van-button>
        </van-row>
        <van-popup v-model:show="popup" position="bottom" round :style="{ height: '60%' }">
            <van-tabs v-model:active="page">
                <van-tab title="登录">
                    <van-form @submit="login()">
                        <van-cell-group inset>
                            <van-field v-model="loginForm.username" name="用户名" label="用户名" placeholder="用户名"
                                :rules="rules.username" :style="{ marginTop: '5%' }" />
                            <van-field v-model="loginForm.password" type="password" name="密码" label="密码"
                                placeholder="密码" :rules="rules.password" :style="{ marginTop: '5%' }" />
                        </van-cell-group>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit" style="font-weight: 700;">
                                提交
                            </van-button>
                        </div>
                    </van-form>
                </van-tab>
                <van-tab title="注册">
                    <van-space align="center" :style="{ marginTop: '5%' }"></van-space>
                    <van-form @submit="register()">
                        <van-cell-group inset>
                            <van-field v-model="registerForm.username" name="用户名" label="用户名" placeholder="用户名"
                                :rules="rules.username" />
                            <van-field v-model="registerForm.password" type="password" name="密码" label="密码"
                                placeholder="密码" :rules="rules.password" />
                            <van-field v-model="registerForm.re_password" type="password" name="确认密码" label="确认密码"
                                placeholder="确认密码" :rules="rules.re_password" />
                        </van-cell-group>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit" style="font-weight: 700;">
                                提交
                            </van-button>
                        </div>
                    </van-form>
                </van-tab>
            </van-tabs>
        </van-popup>
    </div>

</template>

<script setup>

import router from '@/router/index';
import { ref } from 'vue';
import { userLoginService, userRegisterService } from '@/api/user';
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();
const popup = ref(false);
const page = ref(0);
const loginForm = ref({ username: '', password: '' });
const registerForm = ref({ username: '', password: '', re_password: '' });

const rules = {
    username: [
        { required: true, message: '请填写用户名' },
        { pattern: /^\S{3,16}$/, message: '用户名格式错误，请输入3-16位字符' }
    ],
    password: [
        { required: true, message: '请填写密码' },
        { pattern: /^\S{3,16}$/, message: '密码格式错误，请输入3-16位字符' }
    ],
    re_password: [
        { required: true, message: '请确认密码' },
        { validator: (value) => value === registerForm.value.password || '两次密码输入不一致' }
    ]
};

const login = async (username = loginForm.value.username, password = loginForm.value.password) => {
    console.log(username);
    console.log(password);
    let result = await userLoginService(username, password);
    router.push('/home');
    tokenStore.setToken(result.data.message)
}

const register = async (username = registerForm.value.username, password = registerForm.value.password) => {
    console.log(username);
    console.log(password);
    let result = await userRegisterService(username, password);
    if (result.data.statusCode === 0)
        await login(username, password);
}

</script>

<style lang="less" scoped></style>
